<!--
 * @Author: XuMeiyi
 * @Date: 2021-10-26 13:45:06
 * @LastEditors: XuMeiyi
 * @LastEditTime: 2021-11-05 18:40:38
 * @Description: 发布咨询
-->
<template>
  <div style="background: #fff; padding: 1em">
    <el-form
      :inline="true"
      :model="form"
      class="demo-form-inline"
      :rules="rules"
      ref="myForm"
    >
      <!-- 输入框和富文本编辑框 -->
      <div>
        <!-- 输入框和图片上传框 -->
        <el-row>
          <el-col :span="16">
            <!-- 输入标题 -->
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="form.title"
                placeholder="请输入咨询名称"
                style="width: 600px"
                clearable
              ></el-input>
            </el-form-item>
            <!-- 选择栏目分类 -->
            <el-form-item label="分类" prop="categoryId">
              <el-select
                v-model="form.categoryId"
                placeholder="请选择栏目"
                style="width: 300px"
                clearable
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in categories"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!-- 添加图片 -->
            <el-form-item label="封面">
              <el-upload
                action="http://81.69.24.232/pet/jz_upload.php"
                list-type="picture-card"
                :on-success="handleAvatarSuccess"
                :limit="1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <span style="color: darkorange">文件大小不允许超过3M</span>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 富文本编辑器 -->
        <el-form-item label="正文" prop="content">
          <Tinymce v-model="form.content" :height="220" :width="1000"></Tinymce>
        </el-form-item>
      </div>
      <!-- 底部返回按钮和发布按钮 -->
      <div style="text-align: right">
        <el-form-item>
          <el-button
            type="text"
            style="color: green; font-size: 14px"
            @click="toBack"
            >返回</el-button
          >
          <el-button type="primary" @click="releaseCounsel">发布咨询</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { findAllCategory, pageQuery, saveOrUpdate } from "@/api/information";
import { showFileURL } from "@/utils/config";
//引入富文本编辑器
import Tinymce from "@/components/Tinymce";

export default {
  data() {
    return {
      form: {},
      categories: [],
      params: {
        page: 1,
        pageSize: 5,
      },
      rules: {
        title: [{ required: true, message: "请输入咨询标题", trigger: "blur" }],
        categoryId: [
          { required: true, message: "请选择栏目分类", trigger: "blur" },
        ],
      },
      showFileURL,
      // uploadFileURL,
      imageUrl: "",
    };
  },
  methods: {
    //找到所有的风采分类
    async findAllCate() {
      let res = await findAllCategory();
      this.categories = res.data;
    },
    //找到所有的资讯信息
    async findAllInfor() {
      let temp = { ...this.params };
      let res = await pageQuery(temp);
    },
    //图标上传成功的事件
    handleAvatarSuccess(res) {
      //给目标对象设置属性
      this.$set(this.form, "cover", res);
    },
    //点击返回，回到上一级路由
    toBack() {
      this.$router.go(-1);
    },
    //点击发布咨询，成功新增咨询
    async releaseCounsel() {
      let res = await saveOrUpdate(this.form);
      // console.log(res);
      this.$message({
        type: "success",
        message: res.message,
      });
      //刷新页面
      // this.toBack();
      this.findAllInfor();
    },
  },
  created() {
    this.findAllCate();
    this.findAllInfor();
  },
  //注册富文本编辑器
  components: {
    Tinymce,
  },
};
</script>

<style lang="less" scoped>
</style>
